<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="triggerSet_main">
                    <div class="content">
                        <!--  告警项信息页头部栏  -->
                        <div class="triggerSetting-header">
                            <p>设备告警项</p>
                            <el-button :disabled="this.hostid === null" @click="showItemTable = false" type="primary" size="small" style="margin-top: 36px">创建告警项</el-button>
                        </div>
                        <!--  告警项信息中部栏  -->
                        <div class="triggerSetting-middle">
                            <router-link :to="{name:'HostSetting'}">
                                <span class="triggerSetting-middle-host">返回所有设备</span>&nbsp;/&nbsp;
                            </router-link>
                            <!--   主机名称   -->
                            <span style="text-decoration: none;color: #00a4ff;">当前设备: &nbsp;
                                <!-- 选择设备 -->
                <template>
                  <el-select v-model="hostid" @change="handleSelectHost(hostid)" @visible-change="findAllHost"
                             filterable placeholder="选择或输入关键字" :disabled="!showItemTable">
                    <el-option
                            v-for="item in hostInfos"
                            :key="item.hostid"
                            :label="item.host"
                            :value="item.hostid">
                    </el-option>
                  </el-select>
                </template>
            </span>
                            <span style="margin-left: 30px">设备状态: </span><span :class="ifStart" v-text="statusValue"></span>
                            <div class="triggerSetting-middle-type">
                                <span>设备类型: </span>
                                <div :class="ifAvailable('1')" >服务器</div>
                                <div :class="ifAvailable('2')" >交换机</div>
                                <div :class="ifAvailable('3')" >防火墙</div>
                                <div :class="ifAvailable('4')" class="triggerSetting-middle-type-last">单向网闸</div>
                            </div>
                            <!--      <span>告警项 29</span>-->
                        </div>
                        <hr style="margin-top: 45px"/>
                        <!--  告警项信息内容  -->
                        <div v-if="showItemTable" class="triggerSetting-content-table">
                            <el-table
                                    :data="currentPageTriggers"
                                    tooltip-effect="dark"
                                    :height="tableHeight"
                                    width="100%"
                                    @selection-change="handleSelectionChange"
                                    :cell-class-name="priorityCss">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column
                                        prop="priority"
                                        label="严重性"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="value"
                                        label="值"
                                        width="150">
                                    <template slot-scope="scope">
                      <span :class="scope.row.value==='正常' ? 'valueNormalColor' : 'valueWarningColor'">
                          {{scope.row.value}}
                      </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="description"
                                        label="名称">
                                </el-table-column>
                                <el-table-column
                                        prop="opdata"
                                        label="操作数据">
                                </el-table-column>
                                <!-- <el-table-column
                                         prop="expression"
                                         label="表达式"
                                         width="400">
                                 </el-table-column>-->
                                <!--对应status-->
                                <el-table-column
                                        label="状态"
                                        :filters="[{value: '启用', text: '启用'},{value: '禁用', text: '禁用'}]"
                                        :filter-method="filterHandler"
                                        width="180"
                                        show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <el-tooltip content="点击切换状态" placement="top-start">
                                            <el-tag
                                                    :type="scope.row.status === '启用' ? 'success' : 'danger' "
                                                    style="cursor: pointer"
                                                    @click="scope.row.status === '启用' ? disableTrigger(scope.row.triggerid,scope.row.description) : enableTrigger(scope.row.triggerid,scope.row.description)"
                                            >{{scope.row.status}}</el-tag>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total"
                                    @current-change="handleCurrentChange"
                            />
                        </div>
                        <div v-if="!showItemTable" class="triggerSetting-content-form">
                            <!--   在这里加添加触发器的表单标签   -->
                            <el-form ref="alarmForm" :model="alarmForm" label-width="130px" :rules="rules">
                                <el-form-item label="名称" style="width: 650px" prop="description">
                                    <!--及为触发器名称-->
                                    <el-input v-model="alarmForm.description"></el-input>
                                </el-form-item>
                                <el-form-item label="严重性" prop="priority">
                                    <el-radio-group v-model="alarmForm.priority" :fill="backgroundColor" size="medium" @change="changeColor()" style="float: left">
                                        <el-radio-button label="0">未分类</el-radio-button>
                                        <el-radio-button label="1">信息</el-radio-button>
                                        <el-radio-button label="2">警告</el-radio-button>
                                        <el-radio-button label="3">一般严重</el-radio-button>
                                        <el-radio-button label="4">严重</el-radio-button>
                                        <el-radio-button label="5">灾难</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item label="表达式" prop="expression" style="width: 650px;">
                                    <el-input v-model="alarmForm.expression" id="alarmForm" type="textarea" :rows="3" style="width:400px;float: left"></el-input>
                                    <el-button style="float: left" @click="handleAddForm()">添加</el-button>
                                </el-form-item>
                                <el-form-item label="允许手动关闭" prop="manual_close">
                                    <el-checkbox v-model="alarmForm.manual_close" style="float: left" :checked="true" true-label="1" false-label="0"></el-checkbox>
                                </el-form-item>
                                <el-form-item label="描述" prop="comments" style="width: 650px">
                                    <el-input
                                            type="textarea"
                                            :rows="5"
                                            v-model="alarmForm.comments">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="已启用" prop="status">
                                    <el-checkbox v-model="alarmForm.status" style="float: left" :checked="true" true-label="0" false-label="1"></el-checkbox>
                                </el-form-item>
                                <el-form-item>
                                    <div style="margin: auto;float: left">
                                        <el-button type="primary" @click="createTrigger('alarmForm')">添加</el-button>
                                        <el-button @click="returnTriggerList()">取消</el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!--添加表达式弹框-->
                        <div class="add-form">
                            <el-dialog title="条件" :visible.sync="dialogFormVisible">
                                <el-form ref="addForm" :model="addData" :rules="rules">
                                    <el-form-item label="监控项" style=" width: 650px;" prop="item">
                                        <el-input readonly v-model="addData.item" style="width:400px;float: left"></el-input>
                                        <div class="form-input-margin"></div>
                                        <el-button style="float: left" @click="findItems">选择</el-button>
                                    </el-form-item>
                                    <!--功能-->
                                    <el-form-item label="功能" prop="effect">
                                        <el-select v-model="addData.effect" @change="isShowEffect" style="width:400px;float: left" >
                                            <el-option
                                                    v-for="item in effectOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                    <!--最后一个（T）-->
                                    <el-form-item v-if="avgIsShow" label="最后一个（T）" prop="lastOne">
                                        <!--单位-->
                                        <el-input v-model="addData.lastOne" style="width: 160px; float: left"/>
                                        <el-select v-if="unitIsShow" v-model="addData.lastUnit" style="width:100px;float:left">
                                            <el-option label="日" value="d">日</el-option>
                                            <el-option label="时" value="h">时</el-option>
                                            <el-option label="分" value="m">分</el-option>
                                            <el-option label="秒" value="s">秒</el-option>
                                        </el-select>
                                        <el-select v-model="addData.lastchoose" style="width:100px;float: left" @change="isShowUnit">
                                            <el-option value="时间" selected="selected" >时间</el-option>
                                            <el-option value="计数">计数</el-option>
                                        </el-select>
                                    </el-form-item>
                                    <!--last()的最后一个（T）-->
                                    <el-form-item v-if="lastIsShow" label="最后一个（T）" prop="lastOne">
                                        <el-input v-model="addData.lastOne" style="width: 160px;float:left"/>&nbsp;
                                        <label style="float: left;margin-left: 5px">计数</label>
                                    </el-form-item>
                                    <!--间隔-->
                                    <el-form-item v-if="delayIsShow" label="间隔(秒)" prop="delay">
                                        <el-input v-model="addData.delay" style="width: 160px;float:left"/>
                                        <label style="float: left;margin-left: 5px">时间</label>
                                    </el-form-item>
                                    <!--结果-->
                                    <el-form-item label="结果" prop="result">
                                        <el-select v-model="addData.compute" style="width: 70px;float: left">
                                            <el-option label="=" value="="></el-option>
                                            <el-option label="<>" value="<>"></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                        </el-select>&nbsp;&nbsp;
                                        <el-input v-model="addData.result" style="width:150px;float: left" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="insertExpress('addForm')">插入</el-button>
                                        <el-button @click="cancel()">取消</el-button>
                                    </el-form-item>
                                </el-form>
                                <!-- 列出选择列表 -->
                                <div class="add-form">
                                    <el-dialog title="监控项" :visible.sync="chooseFormVisible">
                                        <el-table
                                                @cell-click="handleCell"
                                                :data="tableData"
                                                style="width: 100%">
                                            <el-table-column
                                                    prop="name"
                                                    label="名称"
                                                    width="430">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="key-"
                                                    label="键值">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="type"
                                                    label="类型">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="messagetype"
                                                    label="信息类型">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="status"
                                                    label="状态">
                                            </el-table-column>
                                        </el-table>
                                        <div slot="footer" class="choose-footer">
                                            <el-button @click="chooseFormVisible = false">返回</el-button>
                                        </div>
                                    </el-dialog>
                                </div>
                            </el-dialog>
                        </div>
                        <!--   选择监控项弹窗   -->
                        <el-dialog title="选择监控项" :visible.sync="dialogTableVisible" width="880px">
                            <div style="margin: auto; float: right">
                                <el-input placeholder="输入关键字搜索" v-model="searchItem"></el-input>
                            </div>
                            <el-table
                                    :data="filteredItemList"
                                    width="100%"
                                    height="400">
                                <el-table-column property="name" label="名称" width="300px" >
                                    <template slot-scope="scope">
                                        <a class="itemName" @click.prevent="prevent_(scope.row)">{{scope.row.name}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column property="key_"  label="键值" width="200px"></el-table-column>
                                <el-table-column property="type" label="类型" width="100px"></el-table-column>
                                <el-table-column property="value_type" label="信息类型" width="120px"></el-table-column>
                                <el-table-column label="状态" width="100px">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === '已启用' ? 'success' : 'danger' ">{{scope.row.status}}</el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                        <div v-if="showItemTable" class="triggerSetting-footer">
                            <span>已选择&nbsp;{{selectedItemIds.length}}</span>&nbsp;&nbsp;
                            <el-button type="danger" size="small" :disabled="selectedItemIds.length===0" @click="open">批量删除</el-button>
                            <el-button type="primary" size="small" icon="el-icon-d-arrow-left" @click="comeHomePage">返回</el-button>
                        </div>
                    </div>
                </el-main>
                <vFootSpace/>
            </el-container>
        </el-container>
    </el-container>

</template>

<script>
    import axios from 'axios'

    export default {
        name: "triggerSetting",
        data() {
            return {
              tableHeight: 0.62*document.body.clientHeight,
              hostid: "",
              host: "",
              key_:"",
              backgroundColor:"#827e87",
              insertType:0,
              selectMethod:"",
              chooseFormVisible:false,
              triggerList: [],//所有的触发器
              hostInfo: {},
              chooseHost: false,
              selectedItemIds: [], //所选的itemid,键为页码，值为该页选择的id数组
              selectedNames: [], //所选的itemid,键为页码，值为该页选择的id数组
              hostSate: {}, //主机状态
              currentPage: 1, // 当前页码
              pageSize: 20, // 每页显示的记录数
              total: 20, // 总记录数
              showItemTable: true,  //判断显示表格还是添加监控项表单标志
              hostInfos: [],  //所有的主机名和主机id
              colortag: "red",
              cur_type: '',
              cur_inventory: [],
              effectOptions: [
                {
                  value: '.abschange()',
                  label: 'abschange()-后一个值与前一个值变动的绝对值。'
                },
                {
                  value: '.avg',
                  label: 'avg()-周期T内的平均值'
                },
                {
                  value: '.change()',
                  label: 'change()-最新值和前一个值的差异'
                },
                {
                  value: '.diff()',
                  label: 'diff()-最后一个值和前一个值之间的差异（1-true,0-false）'
                },
                {
                  value: '.last',
                  label: 'last()-最后（最近）的T值'
                },
                {
                  value: '.max',
                  label: 'max()-周期T内的最大值'
                },
                {
                  value: '.min',
                  label: 'min()-周期T内的最小值'
                },
                {
                  value: '.prev()',
                  label: 'prev()-前一个值'
                },
              ],
              unitIsShow: true,
              lastIsShow: false,
              delayIsShow: false,
              avgIsShow: false,
              tableData:[],
              alarmForm:{
                  expression:"",
                  description:"",
                  priority:"0",
                  comments:"",
                  manual_close:"1",
                  status:"0",
                  hostid: ""
              },
              //trigger创建表单
              addData:{
                  key:"",
                  item:"",
                  result:"0",
                  compute:"=",
              },
              //添加表达式弹窗表单
              priority: "0",
              recovery_mode: "0",
              type: "0",
              correlation_mode: "0",
              dialogFormVisible: false, // 添加表达式表单是否可见
              dialogTableVisible: false,
              itemList: [],
              searchItem: '',
              rules: { // 校验规则
                name: [{ required: true, message: '名称为必填项', trigger: 'blur' },
                    {pattern: /^.{1,20}$/,message: '长度为1-20位'}],
                expression: [{ required: true, message: '表达式为必填项', trigger: 'blur' }],
                description:[{required:true,message:'名称为必填项',trigger:'blur'},
                             {pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '名称只能中文、字母和数字组合', trigger: 'blur'}],
                  comments:[{required: false, trigger: 'blur'},
                      {pattern: /^.{1,2048}$/,message: '长度为1-2048位'}],
                item: [{ required: true, message: '监控项为必选项', trigger: 'blur' }],
                effect: [{required: true, message: '功能为必选项', trigger: 'blur'}]
              }
            }
        },
        computed: {
            ifStart: function () {//计算主机状态class
                const status = this.hostSate.status
                if (status === '0')//启用
                    return 'hostStart'
                else           //关闭
                    return 'hostStop'
            },
            statusValue: function () {//计算主机状态内容
                const status = this.hostSate.status
                if (status === '0')//启用
                    return '被监控的设备'
                else           //关闭
                    return '未被监控的设备'
            },
            //计算当前页数据
            currentPageTriggers: function () {
                let start = (this.currentPage - 1) * this.pageSize
                let end = start + this.pageSize
                if (end >= this.triggerList.length)
                    end = this.triggerList.length
                //截取字符串
                return this.triggerList.slice(start, end);
            },
          //输入过滤监控项列表
          filteredItemList: function () {
            if(this.searchItem === '')
              return this.itemList
            else{
              let search = this.searchItem.toLowerCase()
              return this.itemList.filter(item=>{
                return item.name.toLowerCase().indexOf(search) !== -1 ||
                    item.key_.toLowerCase().indexOf(search) !== -1 ||
                    item.type.indexOf(search) !== -1
              })
            }
          }

        },
        mounted() {
            this.hostid = this.$route.query.hostid
            this.host = this.$route.query.host
            this.cur_type = this.$route.query.cur_type
          // if(sessionStorage.getItem('hostid') === null){
          //   sessionStorage.setItem('hostid', '')
          //   sessionStorage.setItem('host', '')
          // }
          // this.hostInfo.hostid = sessionStorage.getItem('hostid')
          // this.hostInfo.host = sessionStorage.getItem('host')
          this.findAllHost()
          //判断主机名是否不为空
          if (this.host !== null && this.host.length > 0) {
            //请求主机状态属性
            this.getHostState()
            //查询所有监控项
            this.findAllTrigger()
          }
        },
        // beforeDestroy() {
        //   //把选择的主机信息存在起来
        //   let host = sessionStorage.getItem('host')
        //   if(this.hostInfo !== undefined){
        //     sessionStorage.setItem('host',this.hostInfo.host)
        //     sessionStorage.setItem('hostid',this.hostInfo.hostid)
        //   }
        // },
        methods: {
            // 判断单位
            isShowUnit(val){
                // console.log(val)
                if (val =='时间'){
                    this.unitIsShow = true
                }else {
                    this.unitIsShow = false
                }
            },
            //返回设备管理页面
            comeHomePage() {
                this.$router.push({path: '/hostSetting'})
            },
            cancel(){
                this.dialogFormVisible = false
                this.resetValidate()
            },
            returnTriggerList(){
                this.showItemTable = true
                this.findAllTrigger()
            },
            prevent_(row) {
                this.addData.item = row.name
                this.dialogTableVisible = false
                this.key_=row.key_
            },
            //重置校验
            resetValidate() {
                if (this.$refs['addForm']!==undefined) {
                    this.$refs['addForm'].resetFields();
                }
            },
            resetInsertForm(){
                this.addData= {
                    last:"",
                    delay:"",
                    lastOne:"",
                    effect:"",
                    key:"",
                    item:"",
                    result:"0",
                    compute:"=",
                    lastUnit:"s",
                }
                this.insertType = 0;
                this.avgIsShow = false;
                this.lastIsShow = false;
                this.delayIsShow = false;
            },
            restAddForm(){
                this.backgroundColor="#827e87"
                this.resetInsertForm()
                this.alarmForm={
                    expression:"",
                    description:"",
                    priority:"0",
                    comments:"",
                    manual_close:"1",
                    status:"0",
                }
            },
            changeColor(){
                if (this.alarmForm.priority==="0"){
                    this.backgroundColor = "#827e87"
                }else if (this.alarmForm.priority==="1"){
                    this.backgroundColor = "#659DFF"
                }else if (this.alarmForm.priority==="2"){
                    this.backgroundColor = "#FFCB1D"
                }else if (this.alarmForm.priority==="3"){
                    this.backgroundColor = "#e05a31"
                }else if (this.alarmForm.priority==="4"){
                    this.backgroundColor = "#E07759"
                }else if (this.alarmForm.priority==="5"){
                    this.backgroundColor = "red"
                }
            },
            //创建触发器
            createTrigger(alarmForm){
                this.$refs[alarmForm].validate((valid) => {
                    if (valid) {
                        axios.post('/trigger/createTrigger.action', this.alarmForm).then((res) => {
                            if (res.data.status) { // 执行成功
                                // 页面显示切换
                                this.dialogFormVisible = false
                                this.showItemTable = true

                                // 弹出提示信息
                                this.$message({
                                    message: res.data.content.createFlag,
                                    type: 'success'
                                })

                                this.restAddForm()

                                // 更新告警项列表
                                this.findAllTrigger()
                            } else { // 执行失败
                                // 弹出提示
                                this.$message.error(res.data.content.createFlag)
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleCell(){
            },
            //插入表达式
            insertExpress(addForm){
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false
                        //创建表达式
                        if (this.insertType === 0) {
                            this.expression_ = "{" + this.host + ":" + this.key_ + this.selectMethod + "}" + this.addData.compute + this.addData.result
                        } else if (this.insertType === 1) {
                            if (this.addData.lastchoose === "时间") {
                                this.expression_ = "{" + this.host + ":" + this.key_ + this.selectMethod + "(" + this.addData.lastOne + this.addData.lastUnit + "," + this.addData.delay + ")" + "}" + this.addData.compute + this.addData.result
                            } else {
                                this.expression_ = "{" + this.host + ":" + this.key_ + this.selectMethod + "(#" + this.addData.lastOne + "," + this.addData.delay + ")" + "}" + this.addData.compute + this.addData.result
                            }
                        } else {
                            this.expression_ = "{" + this.host + ":" + this.key_ + this.selectMethod + "(#" + this.addData.lastOne + "," + this.addData.delay + ")" + "}" + this.addData.compute + this.addData.result
                        }
                        this.alarmForm.expression += this.expression_
                        let af = $('#alarmForm')
                        af.focus()
                        af.blur()

                        this.resetInsertForm()
                    } else {
                        return false;
                    }
                })
            },
            //根据不同函数显示不同的选项
           isShowEffect(selVal) {
            this.selectMethod = selVal
            if(selVal === '.abschange()' || selVal === '.change()' || selVal === '.diff()' || selVal === '.prev()'){
              this.insertType = 0;
              this.avgIsShow = false;
              this.lastIsShow = false;
              this.delayIsShow = false;
            }
            else if(selVal === '.avg' || selVal === '.max' || selVal === '.min'){
              this.insertType= 1
              this.avgIsShow = true;
              this.lastIsShow = false;
              this.delayIsShow = true;
            }
            else if(selVal === '.last'){
              this.insertType= 2
              this.avgIsShow = false;
              this.lastIsShow = true;
              this.delayIsShow = true;
            }
          },
          //表达式添加弹窗
          handleAddForm(){
            this.dialogFormVisible = true;
          },

          getHostState() {//获取主机头部的状态，监控状态，设备可用性
              axios.get('/host/getHostStatus.action?host=' + this.host).then((res) => {
                  if (res.data.status) { // 执行成功
                      this.hostSate = res.data.content
                  }
              })
          },
          findAllHost() {//查询所有主机名和id
              axios.post('/host/findAllHost.action').then((res) => {
                  this.hostInfos = res.data.content.hosts
              })
              this.chooseHost = true
          },
          findAllTrigger() {//查询所有触发器（修改路径）
              axios.post('/trigger/getAllTriggersByHostid.action?hostid=' + this.hostid).then((res) => {
                  this.triggerList = res.data.content.triggers
                  this.total = res.data.content.total
                  this.alarmForm.hostid = this.hostid
              })
          },
          //判断主机的可用性
          // getToolTip: function (type) {//计算提示
          //     let state = ''
          //     switch (type) {
          //         case 1://zbx可用性
          //             state = this.hostSate.available
          //             break;
          //         case 2://snmp可用性
          //             state = this.hostSate.snmp_available
          //             break;
          //         case 3://jmx可用性
          //             state = this.hostSate.jmx_available
          //             break;
          //         case 4://impi可用性
          //             state = this.hostSate.ipmi_available
          //             break;
          //     }
          //     if (state === '1') return '可用'
          //     else if (state === '2') return '不可用'
          //     else return '可用性未知'
          // },
            ifAvailable: function (type){//计算主机可用性class
                if(type === this.cur_type) {
                    return 'hostAvailable'
                }else {
                    return 'hostDefault'
                }
            },
          filterHandler(value, row) {
              return row.status === value;
          },
          //重新显示选中的主机的触发器
          handleSelectHost(item) {
            for(let i=0; i < this.hostInfos.length; i++){
              if(item === this.hostInfos[i].hostid){
                this.host = this.hostInfos[i].host;
                break;
              }
            }
            this.hostid = item
            this.chooseHost = false
            //请求主机状态属性
            this.getHostState()
            //查询所有监控项
            this.findAllTrigger()
            //查询当前主机类型
            this.getCurType(item)
          },
          //handle处理的是选中的触发器
          handleSelectionChange(val) {
              // console.log(val)
              const select = []
              const selectNames = []
              for (let i = 0; i < val.length; i++) {
                  select[i] = val[i].triggerid
                  selectNames[i] = val[i].description
              }
              this.selectedItemIds = select
              this.selectNames = selectNames
          },
          handleCurrentChange(currentPage) {
              //换页
              // 设置最新的页码
              this.currentPage = currentPage
          },
          open() {
              this.$confirm('确定删除所选监控项吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.deleteTrigger()
              }).catch(() => {
              });
          },
          deleteTrigger(){//删除所选监控项
              let triggerIds = {'triggerIds': this.selectedItemIds,'triggerNames': this.selectNames}
              axios.post('/trigger/deleteTrigger.action' , triggerIds).then((res) => {
                  if (res.data.status) { // 执行成功
                      this.findAllTrigger()
                      this.$message({
                          message: '操作成功',
                          type: 'success'
                      })
                  }else{
                      this.$message.error('删除失败，内置告警项不允许删除！')
                  }
              })
          },
            enableTrigger(triggerid,name) {//启用所选监控项
                axios.post('/trigger/enableTrigger.action?triggerid='+triggerid + '&&status=0'+ '&&name='+name).then((res) => {
                    if (res.data.status) { // 执行成功
                        //将列表中的内容改成未启用
                        let item = this.triggerList[0]
                        let i = 0
                        for (; i < this.triggerList.length; i++){
                            if(triggerid === this.triggerList[i].triggerid){
                                item = this.triggerList[i]
                                item.status = '启用'
                                break
                            }
                        }
                        this.triggerList.splice(i, 1, item)
                        this.$message({
                            message: '监控项目已启用',
                            type: 'success'
                        })
                    }else{
                        this.$message.error('操作失败')
                    }
                })
            },
            disableTrigger(triggerid,name){//禁用所选监控项
                axios.get('/trigger/disableTrigger.action?triggerid='+triggerid + '&&status=1'+ '&&name='+name).then((res) => {
                    if (res.data.status) { // 执行成功
                        //将列表中的内容改为已启用
                        let item = this.triggerList[0]
                        let i = 0
                        for (; i < this.triggerList.length; i++){
                            if(triggerid === this.triggerList[i].triggerid){
                                item = this.triggerList[i]
                                item.status = '禁用'
                                break
                            }
                        }
                        this.triggerList.splice(i, 1, item)
                        this.$message({
                            message: '监控项目被禁用',
                            type: 'success'
                        })
                    }else{
                        this.$message.error('操作失败')
                    }
                })
            },
          //计算严重性的 class
          priorityCss({row, column, rowIndex, columnIndex}) {
              let state = ''
              if (row.priority === "信息" && column.property === "priority") {
                  state = 'priorityInfoColor'
              }else if (row.priority === "警告" && column.property === "priority") {
                  state = 'priorityWarningColor'
              }else if (row.priority === "一般严重" && column.property === "priority") {
                  state = 'priorityGenSeriousColor'
              }else if (row.priority === "严重" && column.property === "priority") {
                  state = 'prioritySeriousColor'
              }else if (row.priority === "灾难" && column.property === "priority") {
                  state = 'priorityDisasterColor'
              }else if (row.priority === "未分类" && column.property === "priority"){
                  state = 'priorityOtherColor'
              }
              return state
          },
          //计算值的颜色
          valueCss(value) {
              let state = ''
              switch (value){
                  case "正常":
                      state = 'valueNormalColor'
                      break;
                  case "故障":
                      state = 'valueWarningColor'
                      break;
              }
              return state
          },
          findItems() {//查询所有监控项
            if (this.hostid !== undefined) {
              axios.post('/updateMonitor/queryMonitorItemByHostid.action?hostid=' + this.hostid).then((res) => {
                this.itemList = res.data.content.itemNews
              })
              this.dialogTableVisible = true;
              this.searchItem = '';
            }
          },
        getCurType(item) {
            axios.get('/host/findInventory.action?host=' + item).then((res) => {
                this.cur_inventory = res.data.content.Inventory
                console.log(this.cur_inventory)
                console.log(this.hostSate);
                this.cur_type = this.isType(this.cur_inventory,this.hostSate.available)
                console.log('````' + this.cur_type);
            })
        },
        ifAgentAvail(inv, avail) {
            if (avail === '1') {
                return 'hostAvailable'
            }else if(avail === '2'){
                return 'hostAvailable'
            }else{
                return 'hostDefault'
            }
        },
        ifSwitchAvail(inv, avail) {
            if ((avail !== '1') && (avail !== '2') && ((inv.notes === undefined) || (inv.notes === 'switch'))) {
                return 'hostAvailable'
            }else{
                return 'hostDefault'
            }
        },
        ifFirewallAvail(inv, avail) {
            if (inv.notes === 'firewall') {
                return 'hostAvailable'
            }else{
                return "hostDefault"
            }
        },
        ifSinglegateAvail(inv, avail) {
            if (inv.notes === 'single_gate') {
                return 'hostAvailable'
            }else{
                return "hostDefault"
            }
        },
        // 判断设备类型
        isType(inv, avail) {
                if(this.ifAgentAvail(inv, avail) == 'hostAvailable') {
                    return '1'
                }else if (this.ifSwitchAvail(inv, avail) == 'hostAvailable') {
                    return '2'
                }else if (this.ifFirewallAvail(inv, avail) == 'hostAvailable') {
                    return '3'
                }else if (this.ifSinglegateAvail(inv, avail) == 'hostAvailable'){
                    return '4'
                }else {
                    return '0'
                }
            }
        },

    }
</script>

<style scoped>
    .triggerSet_main{
        padding: 10px;
        height: 92vh;
        width: 100%;
        margin-top: 60px;
    }
    .content{
        width: 100%;
        height: 97%;
        overflow-x:hidden
    }
    .triggerSetting-header {
        height: 56px;
        line-height: 56px;
        vertical-align: center;
    }

    .triggerSetting-header p {
        float: left;
        font-size: 30px;
    }

    .triggerSetting-header button {
        margin-top: 8px;
        float: right;
    }

    .triggerSetting-middle {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        margin-left: -140px;
        float: left;
    }

    .triggerSetting-middle-host {
        text-decoration: none;
        color: #00a4ff;
    }

    .triggerSetting-middle-host :hover {
      cursor: pointer;
      text-decoration: underline;
    }

    .triggerSetting-middle-type {
        display: inline;
        margin-left: 20px;
        line-height: 50px;
    }

    .triggerSetting-middle-type div {
        display: inline;
        padding-left: 5px;
        padding-right: 5px;
        height: 30px;
        line-height: 50px;
        color: #d9d9d9;
        border-top: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }

    /*.triggerSetting-middle-type-first {*/
    /*    border-top-left-radius: 1px;*/
    /*    border-bottom-left-radius: 1px;*/
    /*}*/

    .triggerSetting-middle-type-last {
        border-right: 1px solid #d9d9d9;
    }

    /*.triggerSetting-middle-type div:hover {*/
    /*    cursor: pointer;*/
    /*}*/

    /*.triggerSetting-middle-type div:hover:before {*/
    /*    content: attr(data-tooltip);*/
    /*}*/

    /*span:hover:after {*/
    /*    content: " ";*/
    /*}*/

    .triggerSetting-content-table {
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .triggerSetting-footer {
        position: absolute;
        bottom: 30px;
        margin-bottom: 10px;
        /*margin-top: 20px;*/
        float: left
    }

    /*主机状态*/
    .hostStart {
        /*启用*/
        color: #00dd00;
    }

    .hostStop {
        /*关闭*/
        color: red;
    }

    /*主机可用性*/
    .hostAvailable {
        /*可用*/
        background: green;
    }

    .hostNotAvailable {
        /*不可用*/
        background: red;
    }

    .hostDefault {
        /* 未知*/
        background: white;
    }

    /*值 class*/
    .valueNormalColor {
        color: #45e016;
    }
    .valueWarningColor {
        color: red;
    }
    .itemName {
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }
</style>
<style>
    /*严重性class*/
    .priorityOtherColor {
        background: #827e87;
    }
    .priorityInfoColor {
        background: #659DFF;
    }
    .priorityWarningColor {
        background: #FFCB1D;
    }
    .priorityGenSeriousColor {
        background: #FF8C55;
    }
    .prioritySeriousColor {
        background: #e05a31;
    }
    .priorityDisasterColor {
        background: red;
    }
</style>
